<template>
  <div class="content">
    <div class="md-layout text-center">
      <div class="md-layout-item md-small-size-80 md-medium-size-50 md-size-33" style="margin-top: 60px">
        <md-card class="md-card-profile">
          <div class="md-card-avatar">
            <img class="img" :src="cardUserImage">
          </div>

          <md-card-content>
            <h6 class="category text-gray">404 page not found</h6>
            <h4 class="card-title">找不到该页面</h4>
            <p class="card-description">
              请仔细检查页面路径，该页面不存在哦...
            </p>
            <md-button class="md-round" :class="getColorButton(buttonColor)" @click="goDashboard">返回首页</md-button>
          </md-card-content>
        </md-card>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'NotFound',
    props: {
      cardUserImage: {
        type: String,
        default: './img/placeholder.jpg'
      },
      buttonColor: {
        type: String,
        default: 'success'
      }
    },
    data () {
      return {
      }
    },
    methods: {
      goDashboard(){
        this.$router.push('/')
      },
      getColorButton: function(buttonColor){
        return 'md-'+ buttonColor + ''
      }
    }
  }

</script>
<style>

</style>
